
<template>
    <el-page-header icon="el-icon-arrow-left" @back="$router.replace('/roomtype')" content="房型管理"></el-page-header>
    <el-divider></el-divider>
    <el-form :model="formData" ref="myForm" :rules="rules" label-width="100px">
        <el-form-item label="房型名称" prop="typeName">
                <el-input v-model="formData.typeName" placeholder="如: 标准双人间"></el-input>
        </el-form-item>
        <el-form-item label="床位数" prop="bedCount">
            <el-input-number v-model="formData.bedCount" :min="1" :max="10"></el-input-number>
        </el-form-item>
        <el-form-item label="总面积" prop="roomSize">
            <el-input-number v-model="formData.roomSize"  :min="1" :max="200"></el-input-number>
        </el-form-item>
        <el-form-item label="工作日价格" prop="workdayPrice">
            <el-input-number v-model="formData.workdayPrice"  :min="1" size="2"></el-input-number>
        </el-form-item>
        <el-form-item label="周末价格" prop="weekendPrice">
            <el-input-number v-model="formData.weekendPrice"  :min="1" size=""></el-input-number>
        </el-form-item>
        <el-form-item label="房型描述" prop="typeDesc">
            <el-input type="textarea" v-model="formData.typeDesc" placeholder="如: 有阳台 面向大海 拥有2张1.5m床 无线网络"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('myForm')">提交</el-button>
            <el-button @click="$router.back()">取消</el-button>
        </el-form-item>
    </el-form>
</template>

<script>

    import { ElMessage } from 'element-plus'

    export default {
        data() {
            return {
                isUpdate: false,
                formData: {
                    id: '',
                    typeName: '',
                    bedCount: 1,
                    roomSize: 20,
                    typeDesc: '',
                    workdayPrice: 200,
                    weekendPrice:250
                },
                rules: {
                    typeName: [
                        {required: true, message: '请输入房型名称', trigger: 'blur'}
                    ],
                    bedCount: [
                        {required: true, message: '请输入床位数', trigger: 'blur'}
                    ],
                    workdayPrice: [
                        {required: true, message: '请输入默认工作日价格', trigger: 'blur'}
                    ],
                    weekendPrice: [
                        {required: true, message: '请输入周末价格', trigger: 'blur'}
                    ],
                    roomSize: [
                        {required: true, message: '请输入房型总面积', trigger: 'blur'}
                    ]
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (!valid) return false;
                    // 发送网络请求
                    if (this.isUpdate) {    // 更新
                        this.axios.put('roomtype', this.formData)
                            .then(resp => {
                                if (!resp.data.flag) {
                                    ElMessage.error(resp.data.msg);
                                    return;
                                }
                                ElMessage.success(resp.data.msg);
                                this.$router.replace('/roomtype');
                            });
                    } else {    // 新增
                        this.axios.post('roomtype', this.formData)
                            .then(resp => {
                               if (!resp.data.flag) {
                                   ElMessage.error(resp.data.msg);
                                   return;
                               }
                                ElMessage.success(resp.data.msg);
                                this.$router.replace('/roomtype');
                            });
                    }
                });
            }
        },
        created() {
            let id = this.$route.query.id;
            if (id > 0) {
                this.isUpdate = true;
                this.axios.get('roomtype/' + id)
                .then(resp => {
                    if (!resp.data.flag) {
                        ElMessage.error(resp.data.msg);
                        return;
                    }
                    this.formData = resp.data.data.roomType;
                });
            }
        }
    }
</script>

<style scoped>

</style>